<template>
  <div id="app">
    <section id="content" ref="content" @scroll="toggleHead">
      <transition name="fade-out">
        <router-view class="viewport_wrap" ref="scrollBox" :phone="phone"></router-view>
      </transition>
    </section>
    <modal></modal>
    <loading></loading>
    <toast></toast>
    <selectDate></selectDate>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import loading from './components/loading.vue';
import modal from './components/modal.vue';
import toast from './components/toast.vue';
import selectDate from './components/select-date.vue';
export default {
  name: 'app',
  computed: {
    ...mapState([
      'phone',
      'trueName',
      'uId'
    ])
  },
  components: {
    loading,
    toast,
    modal,
    selectDate
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'index1') this.$router.replace('/');
      this.$store.commit('hideModal');
      this.$store.commit('beDefault');
      this.$store.commit('hideDateWrap');
      if (!['login', 'register', 'forgetPassword', 'selectArea', 'serviceCenter'].includes(to.name)) {
        if (!this.$store.state.phone || !this.$store.state.trueName) {
          this.getPhone();
          this.getInfo();
        }
      }
    }
  },
  mounted () {
    this.getOS();
    this.hack();
    if (!['login', 'register', 'forgetPassword', 'selectArea', 'serviceCenter'].includes(this.$route.name)) {
      if (!this.$store.state.phone || !this.$store.state.trueName) {
        this.getPhone();
        this.getInfo();
      }
    }
  },
  methods: {
    hack () {
      // Disable double finger scaling,stayIOS10Above and aboveQQBrowsersviewportInvalid
      document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      }, false);
    },
    // Judgement devicePCEnd limit width, width height1:2
    getOS () {
      if (!/(Mobile | Tablet | iPhone | iPod | ios | Android | Windows Phone | BlackBerry | MQQBrowser | Symbian)/ig.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent)) document.querySelector('body').style.maxWidth = `${window.innerHeight / 2}px`;
    },
    // Rolling events
    toggleHead (e) {
      // Head rolling change
      this.$store.commit('setWithTop', this.$refs.content.scrollTop);
      // Rolling events
      this.$store.commit('setwithBottom', document.querySelector('.viewport_wrap').clientHeight - (this.$refs.content.scrollTop + this.$refs.content.clientHeight));
    },
    // Get cell phone number
    getPhone () {
      this.axios.get('index/users/mobile').then(({data}) => {
        if (data.status === 200) {
          this.$store.commit('getPhone', data.mobile);
        }
      });
    },
    // Getting user information
    getInfo () {
      this.axios.get('index/rename/rename').then(({data}) => {
        if (data.status === 200) {
          this.$store.commit('getName', data.data.username, data.data.account);
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss">
  @import './style/reset.scss';
  @import './style/public.scss';
  @import url('//at.alicdn.com/t/font_719234_ejxs9t1feow.css');

  // page
  #app{
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: scale(1);
  }

  #content{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    /* When you pull the scroll bar up and down, carton、slow */
    -webkit-overflow-scrolling: touch;
  }

  // The outermost element of a subpage component
  .viewport_wrap{
    width:100%;
    min-height: 100%;
    background-color: #fff;
  }

  .fade-out-enter-active, .fade-out-leave-active {
    transition: opacity .3s;
  }

  .fade-out-enter, .fade-out-leave-active {
    opacity: 0;
  }
</style>
